<template>
  <div>
     <div class="fxpg">
      <div class="inform">
        <div style="width: 100%; height: 100%" id="main"></div>
          <div class="container1">
      <p></p>
      <div class="text_item1">
        <div class="items" @click="clickItem(index)" v-for="(item,index) in list" :key="index">{{ item.name }}
        </div>
      </div>

    </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dian from "../../../../assets/img/dian.png";
export default {
  data() {
    return {
       list: [
        { id: 1, name: '收益' },
        { id: 2, name: '成本收入比' },
        { id: 3, name: '净息差' },
        { id: 4, name: '资产总额' },
        { id: 5, name: '负债总额' },
        { id: 1, name: '收益' },
        { id: 2, name: '成本收入比' },
        { id: 3, name: '净息差' },
        { id: 4, name: '资产总额' },
        { id: 5, name: '负债总额' },
      ],
      num: 0,
      max: 0,
      min: 0

    };
  },
   mounted() {
    this.$nextTick(() => {
      this.getList();
      
    });
  },
  methods:{
     getList(data) {
      // 用于清除定时器
      let tootipTimer = null;
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0,0,0,0.3)"
        }
      };
      option = {
         grid: {
                    top: '12%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
        xAxis: {
          //  axisLine: {
          //     show: false, //隐藏y轴
          //   },
          // axisTick: {
          //   show: false,  //刻度线
          // },
          // splitLine: { show: false },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#00FFB5",
              fontSize: "14"
            }
          },

          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {
          //      axisTick:{       //y轴刻度线
          //   show:false
          // },
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              color: "#00FFB5",
              fontSize: "14"
            }
          },
          splitLine: {
            show: true,

            lineStyle: {
              color: ["#010D15"],
              width: 1,
              type: "solid"
            }
          },

          type: "value",
          splitArea: {
            show: true,
            areaStyle: {
              color: ["#010D15", "#02171F"]
            }
          }
        },
        series: [
          {
            name: "年产值",
            type: "line",
            showBackground: true,
            smooth: false,
            backgroundStyle: {
              color: "rgba(245, 246, 250, 1)"
            },
            symbol: "image://" + dian,
            showAllSymbol: false,
            symbolSize: 20,
            lineStyle: {
              normal: {
                color: "#00FFFB" // 线条颜色
              }
            },
            itemStyle: {
              color: "#C5FD08",
              borderColor: "#C5FD08",
              borderWidth: 2
            },
            label: {
              normal: {
                show: false,
                position: "top",
                rich: {
                  a: {
                    color: "#fff",
                    align: "center"
                  }
                }
              }
            },
            tooltip: {
              show: true
            },
            data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135]
          }
        ]
      };

      option && myChart.setOption(option);
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = tools.loopShowTooltip(myChart, option, {
        interval: 3000, // 轮播间隔时间
        loopSeries: true // 是否开启轮播循环
      });
    },
       clickItem(index) {
      let that = this

      // 获取到 container1 整个盒子
      var container1 = document.querySelector(".text_item1");
      console.log(container1);
      // 获取包裹盒子 container1.offsetWidth
      var container1W = container1.offsetWidth;

      // 找到所有需要被点击的 item 的集合
      var itemList = document.querySelectorAll(".items");

      // 遍历数组
      for (let i = 0; i < itemList.length; i++) {
        console.log(itemList[i]);
        // 给每个元素添加点击事件
        itemList[i].onclick = function () {

          // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
          var scrollLeftNum = itemList[i].offsetLeft - container1W / 2 + itemList[i].offsetWidth / 2;
          console.log(scrollLeftNum, '距离')

          // 赋值
          container1.scrollLeft = scrollLeftNum;
          // console.log(index);
          // if (index > 2) {
          //   that.list.push(that.list.shift())
          // } else {
          //   that.list.unshift(that.list.pop())
          // }
          if (scrollLeftNum > that.max) {
            that.max = scrollLeftNum
          }
          if (index <= 1) {
            container1.scrollLeft = that.max

          }
          if (index >= 8) {
            container1.scrollLeft = 0
          }

        }
      }
    }
  }
}
</script>

<style scoped>
.inform {
  width: 568px;
  height: 240px;
  background-color: #fff;
  /* padding: 0 24px; */
  /* margin-top: -15px; */
  /* overflow: hidden; */
}
.fxpg {
  width: 568px;
  height: 240px;
}
.container1 {
  height: 20%;
  width: 90%;
  background-color: transparent;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  /* 可以使窗口平稳滚动 */
  /* scroll-behavior: smooth; */
  margin: 0 auto;
  text-align: center;

}

.container1 p {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right,
      #015159 0%,
      #25CBFC 50%,
      #015159 100%);
  position: absolute;
  top: 15px;
}

.text_item1 {
  /* justify-content: space-around; */
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
  /* 可以使窗口平稳滚动 */
  scroll-behavior: smooth;
  /* background-color: #00B0B0; */
}

.items {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00B0B0;
  line-height: 17px;
  position: relative;
  margin-top: 27px;
}

.items::after {
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -15PX;
  transform: translateX(-50%);

}


.text_item1::-webkit-scrollbar {
  display: none;
}
</style>